<template>
  <div>
      <h4>发表评论</h4>
      <hr>
      <textarea placeholder="请输入要评论的内容(200字以内)" maxlength="200" v-model="text"></textarea>
      <mt-button type="primary" size="large" @click="postComment" >发表评论</mt-button>
      <div class="comment" v-for="item in comments" :key="item.add_time">
        <div class="user-face">
          <img :src="item.img_url">
        </div>
        <div class="con" >
          <div class="username">{{item.user_name}}</div>
          <p class="text">{{item.content}}</p>
          <div class="info">
            <span>{{item.add_time|dateFormat}}</span>
            <span></span>
          </div>
        </div>

      </div>

      <mt-button type="primary" size="large" plain @click="getMore">加载更多</mt-button>
  </div>
</template>

<script>
import axios from 'axios'
import {Toast} from 'mint-ui'
export default {
  data(){
    return{
      pageindex:1,
      comments:[],
      text:"",
      add_time:""
    }
  },
  created(){
    this.getComments()
  },
  methods:{
    getComments(){
      axios.get('/api/getcomments/:'+this.id+'?pageindex='+this.pageindex).then(res=>{
        this.comments=this.comments.concat(res.data.message)
      })
    },
    getMore(){
      this. pageindex++;
      this.getComments();
    },
    postComment(){
      if(this.text.trim()===0){
        return Toast("评论内容不能为空！")
      }
      axios.post('/api/postcomment/'+this.$route.params.id,{
        text:this.text.trim()
      }).then(res=>{
        if(res.data.status===0){
          var cmt={
            user_name:'匿名',
            add_time:new Date(),
            content:this.text.trim(),
            img_url:""
          };
          this.comments.unshift(cmt);
          this.text="";
        }
        

      })
    }
  },
  props:["id"]
  
}
</script>

<style lang="less" scoped>
.comment{
  display: flex;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin: 6px 0;
  .user-face{
    width: 60px;
    height: 60px;
    border: 1px dashed #0016ff;
    border-radius: 50%;
    padding: 3px;
    img{
      width: 100%;
      border-radius: 50%;
    }
  }
  
  .con{
    flex: 1;
    padding-left: 10px;
    .username{
      padding-bottom: 5px;
      font-size: 13px;
      color: #ceb83b;

    }
    .text{
    font-size: 14px;
  }
  .info{
    font-size: 12px;
    color: #ccc;
  }

  }
}
  
</style>